<template>
  <div class="registration-payment-container">
    <!-- 操作栏 -->
    <div class="operation-bar">
      <el-input
        v-model="queryParams.searchKey"
        placeholder="请输入姓名/证件号搜索"
        style="width: 300px; margin-right: 10px"
        clearable
        @keyup.enter.native="handleQuery"
      />
      <el-button type="primary" icon="el-icon-search" @click="handleQuery">
        搜索
      </el-button>
      <el-button type="default" icon="el-icon-refresh" @click="resetQuery">
        重置
      </el-button>
      <div style="flex: 1"></div>
      <el-button type="primary" @click="openPersonalDialog">
        <i class="el-icon-plus"></i> 新增个人报名
      </el-button>
      <el-button type="primary" style="margin-left: 10px" @click="openGroupDialog">
        <i class="el-icon-user-plus"></i> 新增集体报名
      </el-button>
    </div>

    <!-- 数据加载状态 -->
    <el-loading v-if="loading" fullscreen text="加载中..." />

    <!-- 卡片列表（核心修改：用卡片代替表格行） -->
    <div class="card-list">
      <!-- 无数据提示 -->
      <div class="empty-state" v-if="!loading && registrationList.length === 0">
        <el-empty description="暂无报名数据" />
      </div>

      <!-- 卡片循环渲染 -->
      <el-card
        class="data-card"
        shadow="hover"
        v-for="(item, index) in registrationList"
        :key="item.registrationId"
      >
        <!-- 卡片选择框 -->
        <div class="card-checkbox">
          <el-checkbox
            v-model="selectedIds"
            :label="item.registrationId"
            @change="handleCheckChange"
          ></el-checkbox>
        </div>

        <!-- 卡片内容 -->
        <div class="card-content">
          <div class="card-header-info">
            <h3 class="card-title">
              {{ item.studentName }}
              <el-tag :type="item.paymentStatus === '已缴费' ? 'success' : 'warning'" size="mini" style="margin-left: 10px">
                {{ item.paymentStatus || '未缴费' }}
              </el-tag>
            </h3>
            <p class="card-subtitle">报名ID: {{ item.registrationId }}</p>
          </div>

          <div class="card-details">
            <div class="detail-row">
              <span class="detail-label">证件号码:</span>
              <span class="detail-value">{{ item.idNumber }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">培训类型:</span>
              <span class="detail-value">{{ item.trainingType }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">报名项目:</span>
              <span class="detail-value">{{ item.projectName }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">联系电话:</span>
              <span class="detail-value">{{ item.phonenumber }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">提交状态:</span>
              <span class="detail-value">{{ item.submitStatus }}</span>
            </div>
          </div>
        </div>

        <!-- 卡片操作区 -->
        <div class="card-actions">
          <el-button
            type="text"
            size="small"
            @click="openRemarkDialog(item.registrationId)"
          >
            备注
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleView(item)"
            style="color: #165dff"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleEdit(item)"
            style="color: #409eff"
          >
            编辑
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination" style="margin-top: 15px; text-align: right">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 弹窗组件（保持不变） -->
    <PersonalDialog
      :visible.sync="personalDialogVisible"
      :project-id="selectedProjectId"
      @success="refreshList"
    />
    <GroupDialog
      :visible.sync="groupDialogVisible"
      @success="refreshList"
    />
    <RemarkDialog
      :visible.sync="remarkDialogVisible"
      :registration-id="currentRegistrationId"
      @success="handleRemarkSuccess"
    />
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      @close="handleDialogClose"
    >
      <el-form ref="detailForm" :model="formData" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="formData.studentName" disabled />
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="formData.idNumber" disabled />
        </el-form-item>
        <el-form-item label="培训类型">
          <el-input v-model="formData.trainingType" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="formData.phonenumber" :disabled="!isEdit" />
        </el-form-item>
      </el-form>
      <div slot="footer" v-if="isEdit">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="submitEdit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 脚本逻辑保持不变
import PersonalDialog from '@/components/portal/registration/personalDialog.vue';
import GroupDialog from '@/components/portal/registration/groupDialog.vue';
import RemarkDialog from '@/components/portal/registration/remarkDialog.vue';
import { registrationList, getRegistration, updateInfo } from '@/api/training/registration';

export default {
  name: 'RegistrationPayment',
  components: {
    PersonalDialog,
    GroupDialog,
    RemarkDialog
  },
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      registrationList: [],
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        userId: this.userId
      },
      selectedIds: [], // 选中的报名ID集合
      personalDialogVisible: false,
      groupDialogVisible: false,
      remarkDialogVisible: false,
      currentRegistrationId: '',
      selectedProjectId: '',
      dialogVisible: false,
      dialogTitle: '',
      isEdit: false,
      formData: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true;
      registrationList(this.queryParams).then(response => {
        this.registrationList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置搜索
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        userId: this.userId
      };
      this.getList();
    },
    // 分页尺寸变化
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
      this.getList();
    },
    // 分页页码变化
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    // 处理复选框变化（替代原表格的selection-change）
    handleCheckChange() {
      // 保持与原逻辑一致，selectedIds已通过v-model绑定
    },
    // 打开个人报名弹窗
    openPersonalDialog() {
      this.personalDialogVisible = true;
    },
    // 打开集体报名弹窗
    openGroupDialog() {
      this.groupDialogVisible = true;
    },
    // 打开备注弹窗
    openRemarkDialog(registrationId) {
      this.currentRegistrationId = registrationId;
      this.remarkDialogVisible = true;
    },
    // 备注提交成功
    handleRemarkSuccess() {
      this.$message.success('备注已保存');
      this.getList();
    },
    // 刷新列表
    refreshList() {
      this.getList();
    },
    // 查看详情
    handleView(row) {
      this.isEdit = false;
      this.dialogTitle = '查看报名信息';
      this.formData = { ...row };
      this.dialogVisible = true;
    },
    // 编辑
    handleEdit(row) {
      this.isEdit = true;
      this.dialogTitle = '编辑报名信息';
      getRegistration(row.registrationId).then(response => {
        this.formData = response.data;
        this.dialogVisible = true;
      });
    },
    // 提交编辑
    submitEdit() {
      updateInfo(this.formData).then(response => {
        if (response.code === 200) {
          this.$message.success('修改成功');
          this.dialogVisible = false;
          this.getList();
        }
      });
    },
    // 关闭查看/编辑弹窗
    handleDialogClose() {
      this.dialogVisible = false;
      this.formData = {};
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.registration-payment-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100% - 30px);
  box-sizing: border-box;
}

/* 操作栏 */
.operation-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 卡片列表：网格布局 */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* 数据卡片样式 */
.data-card {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.data-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 卡片内复选框 */
.card-checkbox {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}

/* 卡片内容区 */
.card-content {
  padding: 15px 20px;
}

/* 卡片头部信息 */
.card-header-info {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

.card-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  display: flex;
  align-items: center;
}

.card-subtitle {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

/* 卡片详情内容 */
.card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
}

.detail-label {
  flex: 0 0 80px;
  font-size: 13px;
  color: #6b7280;
}

.detail-value {
  flex: 1;
  font-size: 13px;
  color: #1f2329;
  word-break: break-all;
}

/* 卡片操作区 */
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 10px 20px;
  border-top: 1px solid #f5f5f5;
  background-color: #fafafa;
}

/* 无数据状态 */
.empty-state {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
}

/* 分页 */
.pagination {
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .card-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .registration-payment-container {
    padding: 10px;
  }

  .operation-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .el-input {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .card-list {
    grid-template-columns: 1fr;
  }

  .card-details {
    grid-template-columns: 1fr;
  }
}
</style>
